<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <el-form
        label-width="130px"
        :model="projectForm"
        style="padding-right: 30px;"
        :rules="addProgramFormRules"
        ref="projectForm"
      >
        <el-row>
          <el-col :span="16" style="margin-top: 27px;">
            <el-form-item class="form-item" label="规划名称 :" prop="planningTitle">
              <el-input
                placeholder="请输入规划名称"
                v-model="projectForm.planningTitle"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item" label="方案描述 :" prop="description">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入方案描述"
                v-model="projectForm.description"
                :disabled="$route.query.watch?true:false"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <div style="margin-top: 18px;margin-left: 82px;font-size:14px;color:#606266">
              <p class="" style="float:left;font-weight: 600;margin-bottom: 0px;">附件 ：</p>
              <div v-for="(file,index) in files" :key="index" class="relateddiv">
                <el-tooltip class="item" effect="dark" content="下载资料" placement="top-start">
                  <el-button class="downbtn" @click="downloadFile(file.fileId,file.fileName)">
                    <img src="img/download-blue.png" class="detail-data-img"/><span>下载</span>
                  </el-button>
                </el-tooltip>
                <p class="detail-data-file" v-if="file.fileName">{{file.fileName}}</p>
              </div>
              <p class="detail-data-file" v-if="files.length==0">无</p>
            </div>
            <el-form-item class="form-item" label="相关附件:" v-if="!$route.query.watch">
              <el-upload
                class="upload-demo"
                ref="uploadrelated"
                action="string"
                :http-request="submitUploadMixin"
                :on-preview="handlePreviewMixin"
                :on-remove="handleRemoveMixin"
                :file-list="fileListMixin"
                :auto-upload="true"
                :on-change="fileChangeMixin">
                <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--指标，任务，项目配置-->
      <el-collapse v-model="activeNames" style="margin-top:2rem;">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">指标</div>
            </div>
          </template>
          <div style="float: right;margin:10px 5px -3px 0px">
            <el-button type="primary" size="mini" @click="addNorm('0')" v-if="!$route.query.watch">添加指标67</el-button>
          </div>
          <avue-crud :data="normListData"
                     :option="normTableOption"
                     :page="normPage"
                     :table-loading="normTableLoading"
                     @on-load="getNormList"
                     @size-change="sizeChange1"
                     @current-change="currentChange1"
                     class="avuecrud">
            <template slot-scope="scope" slot="menu">
              <div class="menu-title" @click.stop="modify(scope.row,'0')" v-if="!$route.query.watch">
                <i class="iconfont iconview icon-primary"></i>
                <p class="menu-title-text">修改</p>
              </div>
              <div class="menu-title" @click.stop="normDelete(scope.row,scope.index)" v-if="!$route.query.watch">
                <i class="iconfont iconalter icon-warning"></i>
                <p class="menu-title-text">删除</p>
              </div>
            </template>
          </avue-crud>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">任务</div>
            </div>
          </template>
          <div style="float: right;margin:10px 5px -3px 0px">
            <el-button type="primary" size="mini" @click="addNorm('1')" v-if="!$route.query.watch">添加任务</el-button>
          </div>
          <avue-crud :data="taskListData"
                     :option="taskTableOption"
                     :page="taskPage"
                     :table-loading="taskTableLoading"
                     @on-load="getTaskList"
                     @size-change="sizeChange2"
                     @current-change="currentChange2"
                     class="avuecrud">
            <template slot-scope="scope" slot="menu">
              <div class="menu-title" @click.stop="modify(scope.row,'1')" v-if="!$route.query.watch">
                <i class="iconfont iconview icon-primary"></i>
                <p class="menu-title-text">修改</p>
              </div>
              <div class="menu-title" @click.stop="taskDelete(scope.row,scope.index)" v-if="!$route.query.watch">
                <i class="iconfont iconalter icon-warning"></i>
                <p class="menu-title-text">删除</p>
              </div>
            </template>
          </avue-crud>
        </el-collapse-item>
        <el-collapse-item name="3">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">项目</div>
            </div>
          </template>
          <div style="float: right;margin:10px 5px -3px 0px">
            <el-button type="primary" size="mini" @click="addNorm('2')" v-if="!$route.query.watch">添加项目</el-button>
          </div>
          <avue-crud :data="projectListData"
                     :option="projectTableOption"
                     :page="projectPage"
                     :table-loading="projectTableLoading"
                     @on-load="getProjectList"
                     @size-change="sizeChange3"
                     @current-change="currentChange3"
                     class="avuecrud">
            <template slot-scope="scope" slot="menu">
              <div class="menu-title" @click.stop="modify(scope.row,'2')" v-if="!$route.query.watch">
                <i class="iconfont iconview icon-primary"></i>
                <p class="menu-title-text">修改</p>
              </div>
              <div class="menu-title" @click.stop="projectDelete(scope.row,scope.index)" v-if="!$route.query.watch">
                <i class="iconfont iconalter icon-warning"></i>
                <p class="menu-title-text">删除</p>
              </div>
            </template>
          </avue-crud>
        </el-collapse-item>
      </el-collapse>
      <div class="form-submit">

        <el-button type="success" @click="exportDraftFile()">导 出 方 案</el-button>
        <el-button type="primary" :disabled="isDisabled" @click.stop="commitList()" v-if="!$route.query.watch">确 认 修 改
        </el-button>
      </div>

      <!--牵头单位部门选择-->
      <dept-select :visible="deptVisible" @getSelectInfo="getSelectInfo" @cancel="cancelDept"></dept-select>
      <dept-check :visible="supportDeptVisible" @getCheckInfo="getSupportDeptCheckInfo"
                  @cancel="cancelSupportDept"></dept-check>
      <!--增加指标弹出框begin-->
      <el-dialog :title="(modifyId?'修改':'添加')+(dutyType==0?'指标':dutyType==1?'任务':dutyType==2?'项目':'')"
                 :visible.sync="normDialogVisible" width="1000px" @close='close' @closed='closed'>
        <el-form
          label-width="130px"
          :model="addNormForm"
          style="padding-right: 30px;"
          :rules="addNormFormFormRules"
          ref="addNormForm"
        >
          <el-row>
            <el-col :span="22">
              <el-form-item class="form-item" :label="dutyType==0?'指标名称':dutyType==1?'任务名称':dutyType==2?'项目名称':''"
                            prop="itemName">
                <el-input
                  placeholder="请输入名称"
                  v-model="addNormForm.itemName"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item class="form-item" :label="dutyType==0?'指标说明':dutyType==1?'任务内容':dutyType==2?'项目内容':''"
                            prop="description">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4}"
                  placeholder="请输入内容"
                  v-model="addNormForm.description"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item class="form-item" label="指标类别 :" prop="classify" v-if="dutyType=='0'">
                <el-select
                  v-model="addNormForm.classify"
                  placeholder="请选择"
                  style="width: 280px;"
                >
                  <el-option
                    v-for="item in classifyDIC"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item :required="true" label="牵头部门 :" prop="mainDeptName" class="form-item">
                <span style="font-size: 16px">{{addNormForm.mainDeptName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button size="small" type="primary" icon="el-icon-plus" style="margin-left: 10px;"
                         @click="clickMainDept">选择牵头部门
              </el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="配合部门 :" prop="assortDeptName" class="form-item">
                <span style="font-size: 16px">{{addNormForm.assortDeptName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button size="small" type="primary" icon="el-icon-plus" style="margin-left: 10px;"
                         @click="clickAssortDept">选择配合部门
              </el-button>
            </el-col>
          </el-row>
          <el-row v-if="dutyType=='0'">
            <el-col :span="10">
              <el-form-item class="form-item" label="基期年 :" prop="basePeriodYear">
                <el-date-picker
                  v-model="addNormForm.basePeriodYear"
                  type="year"
                  placeholder="选择年份"
                  value-format="yyyy"
                  format="yyyy"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item class="form-item" label="基数 :" prop="base">
                <el-input v-model="addNormForm.base" placeholder="请输入基数"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item class="form-item" label="开始年份 :" prop="startDate" style="float: left;">
                <el-date-picker
                  v-model="addNormForm.startDate"
                  type="year"
                  value-format="yyyy"
                  placeholder="选择年">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item class="form-item" label="目标年份 :" prop="endDate" style="float: left;">
                <el-date-picker
                  v-model="addNormForm.endDate"
                  type="year"
                  value-format="yyyy"
                  placeholder="选择年">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="dutyType!=1">
            <el-col :span="10">
              <el-form-item class="form-item" :label="dutyType==2?'定量目标 :':'总目标 :'" prop="totalTarget">
                <el-input v-model="addNormForm.totalTarget" :placeholder="dutyType==2?'请输入定量目标 :':'请输入总目标'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item class="form-item" :label="dutyType==2?'定量单位 :':'总目标单位 :'" prop="totalTargetUnit">
                <el-input v-model="addNormForm.totalTargetUnit"
                          :placeholder="dutyType==2?'请输入定量单位':'请输入总目标单位'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="dutyType==2">
            <el-col :span="10">
              <el-form-item class="form-item" label="定性目标 :" prop="qualitativeTarget">
                <el-input v-model="addNormForm.qualitativeTarget" placeholder="请输入定性目标"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="dutyType==0">
            <el-col :span="10">
              <el-form-item class="form-item" label="是否可量化 :" prop="lianghua">
                <el-select
                  v-model="addNormForm.lianghua"
                  placeholder="请选择"
                  style="width: 280px;"
                >
                  <el-option
                    v-for="item in lianghuaDIC"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="dutyType==0">
            <el-col :span="10">
              <el-form-item class="form-item" label="年均增长 :" prop="yearAverageRise">
                <el-input v-model="addNormForm.yearAverageRise" placeholder="请输入年均增长"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item class="form-item" label="属性 :" prop="attribute">
                <el-select
                  v-model="addNormForm.attribute"
                  placeholder="请选择"
                  style="width: 280px;"
                >
                  <el-option
                    v-for="item in attributeDIC"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item class="form-item" label="时间类型 :" prop="submitPeriod">
                <el-select
                  v-model="addNormForm.submitPeriod"
                  placeholder="请选择"
                  style="width: 280px;"
                >
                  <el-option
                    v-for="item in submitPeriodData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row>
          <el-col :span="24" style="text-align:center">
            <el-button type="primary" @click="confirmNormForm()">{{modifyId?'修改':'添加'}}</el-button>
          </el-col>
        </el-row>

        <div v-if="task&&modifyId">
          <!-- <el-button type="primary" style="float:right" @click.stop="modifyTargetVisible=true,addId=ditemId">新增目标
          </el-button> -->
          <div slot="footer" class="dialog-footer">
            <avue-crud
              :data="tableData"
              :option="{...option,menu: false}"
              class="avuecrud"
            >
              <!-- <template slot-scope="scope" slot="menu">
                <div class="menu-title" v-if="!$route.query.watch" @click.stop="modifyTargetButton(scope.row)">
                  <i class="iconfont iconview icon-primary"></i>
                  <p class="menu-title-text">修改</p>
                </div>
                <div class="menu-title" v-if="!$route.query.watch" @click.stop="delTarget(scope.row,scope.index)">
                  <i class="iconfont iconview icon-primary"></i>
                  <p class="menu-title-text">删除</p>
                </div>
              </template> -->
            </avue-crud>
          </div>
        </div>
      </el-dialog>
      <!--增加指标弹出框begin-->
      <el-dialog :title="$route.query.watch?'查看目标':addId?'新增目标':'修改目标'" :visible.sync="modifyTargetVisible"
                 width="1000px" @closed="closed">
        <el-form
          label-width="130px"
          :model="modifyTargetForm"
          style="padding-right: 30px;"
          :rules="modifyTargetRules"
          ref="modifyTargetForm"
        >
          <el-row>
            <el-col :span="18" style="margin-top: 27px;">
              <el-form-item class="form-item" label="年份 :" prop="year">
                <!--<el-input v-model="modifyTargetForm.year" placeholder="请输入年份"></el-input>-->
                <el-date-picker
                  v-model="modifyTargetForm.year"
                  type="year"
                  placeholder="请选择年份"
                  value-format="yyyy"
                  format="yyyy"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18" style="margin-top: 27px;">
              <el-form-item class="form-item" label="目标值 :" prop="targetValue">
                <el-input v-model="modifyTargetForm.targetValue" placeholder="请输入目标值"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18" style="margin-top: 27px;">
              <el-form-item class="form-item" label="目标值单位 :" prop="targetValueUnit">
                <el-input v-model="modifyTargetForm.targetValueUnit" placeholder="请输入目标值单位"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18" style="margin-top: 27px;">
              <el-form-item class="form-item" label="目标内容 :" prop="targetContent">
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}"
                          v-model="modifyTargetForm.targetContent" placeholder="请输入目标内容"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="text-align:center">
            <el-col :span="18" style="width:100%">
              <el-button type="primary" @click="modifyWorkingItemTarget()">{{addId?'新增':'修改'}}</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
      <el-dialog title='详情' :visible.sync='detail' width="70%" @close='close' @closed='closed'>
        <div style="margin-left: 9px; margin-top: -70px;">
          <bostech-detail :detail-data="itemDetailData"></bostech-detail>
        </div>
        <avue-crud
          :data="tableData"
          :option="option"
          class="avuecrud"
          v-if="task"
        >
        </avue-crud>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script>
  import {addProgramFormRules} from "@/const/infoRules";
  import {subjectCollection} from "@/api/subject";
  import {
    decomposeItemDetail,
    modifyWorkingItemTarget,
    getProgramDetail,
    deleteWorkingItemTarget,
    modifyProgramDetail,
    modifyDecomposition,
    delDecomposition,
    decomposeDraftDetailList,
    addDecomposition,
    workingItemTargetPage,
    addWorkingItemTarget,
    exportDraftFile
  } from "@/api/pim/pim";
  import {PROJECT_DIC} from '@/const/dict';
  import {resultList} from "@/api/planning/result";
  import {getAreaByType, filedownload} from "@/api/system";
  import relatedfile from "@/mixins/relatedfile";
  import request from '@/router/axios'
  import listConlumn from '@/views/planning/detailedList/listConlumn'
  import {getNotNull, getFileTypeFiles} from '@/views/util'
  import {addTargetRules} from "@/const/infoRules";


  export default {
    name: "modifyProgram",
    mixins: [relatedfile],
    created() {
      window.watchDetail = this.watchDetail;
      this.loadData('1');
      this.loadData('2');
      this.loadData('3');
      //获取分解方案详情
      getProgramDetail(JSON.parse(sessionStorage.getItem('modifyProgram'))).then(async response => {
        let fileIds = response.data.data.fileIds;
        if (response.data.code == 0) {
          this.dataList = response.data.data;
          this.projectForm.description = this.dataList.description;
          this.projectForm.planningTitle = this.dataList.planningTitle;
          this.startDateTemp = response.data.data.startDate;
          this.endDateTemp = response.data.data.endDate;
          if (fileIds != null) {
            if (fileIds.length != 0) {
              this.fileIds = fileIds;
              this.files = await getFileTypeFiles(fileIds);
            }
          }
        }
      })
    },
    components: {
      listConlumn
    },
    watch: {},
    data() {
      return {
        classifyDIC: [
          {
            label: "经济发展",
            value: "1"
          },
          {
            label: "创新驱动",
            value: "2"
          },
          {
            label: "民生福祉",
            value: "3"
          },
          {
            label: "资源环境",
            value: "4"
          },
        ],
        detail: false,
        lianghuaDIC: [
          {
            label: "否",
            value: "0"
          },
          {
            label: "是",
            value: "1"
          },
        ],
        attributeDIC: [
          {
            label: "预期性",
            value: "0"
          },
          {
            label: "约束性",
            value: "1"
          },
        ],
        submitPeriodData: [
          {
            label: "年报",
            value: "1"
          },
          {
            label: "季报",
            value: "2"
          },
          {
            label: "月报",
            value: "3"
          },
        ],
        ditemId: '',
        tableData: [],
        option: {
          page: true,
          addBtn: false,
          editBtn: false,
          indexLabel: "序号",
          index: true,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          menuWidth: 150,
          keyId: "id",
          column: [{
            label: "年份",
            prop: "year",
            cell: true
          },
            {
              label: "目标值",
              prop: "targetValue",
              cell: true
            },
            {
              label: "目标值单位",
              prop: "targetValueUnit",
              cell: true
            },
            {
              label: "目标内容",
              width: 400,
              prop: "targetContent",
              cell: true
            },
          ]
        },
        modifyTargetRules: {
          year: [
            {required: true, message: "请选择年份", trigger: "blur"}
          ],
          targetValue: [
            {required: true, message: "请输入目标值", trigger: "blur"}
          ],
          targetValueUnit: [
            {required: true, message: "请输入目标值单位", trigger: "blur"}
          ],
          targetContent: [
            {required: true, message: "请输入目标内容", trigger: "blur"}
          ],
        },
        modifyTargetForm: {},
        modifyTargetVisible: false,
        fileIds: [],
        dataList: {},
        files: [],
        headerData: {
          title: this.$route.query.watch ? '方案详情' : '修改方案'
        },
        addProgramFormRules: addProgramFormRules,// 表单验证
        projectForm: {
          description: '',
          fileIds: [],
          planningTitle: '',
          pmuc: '',
          itemTargetList: [],
          itemTaskList: [],
          itemProjectList: [],
        },
        deptVisible: false,//协同部门树弹窗标志
        supportDeptVisible: false,//协同部门树弹窗标志
        state: '3',//状态
        isDisabled: false,
        expireTimeOption: {
          disabledDate(date) { //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
            return date.getTime() <= Date.now();
          }
        },
        activeNames: ['1', '2', '3'],
        activeName: 'first',
        addNormFormFormRules: {
          description: [
            {required: true, message: "请输入内容", trigger: "blur"}
          ],
          totalTarget: [
            {required: false, message: "请输入总目标", trigger: "blur"}
          ],
          totalTargetUnit: [
            {required: false, message: "请输入总目标单位", trigger: "blur"}
          ],
          startDate: [
            {required: true, message: "请输入开始年份", trigger: "blur"}
          ],
          endDate: [
            {required: true, message: "请输入结束年份", trigger: "blur"}
          ],
          mainDeptName: [
            {required: true, message: "请输入牵头部门", trigger: "blur"}
          ],
          lianghua: [
            {required: true, message: "请选择是否可量化", trigger: "blur"}
          ],
          itemName: [
            {required: true, message: "请输入名称", trigger: "blur"}
          ],
          submitPeriod: [
            {required: true, message: "请选择时间类型", trigger: "change"}
          ]
        },
        normListData: [],
        normTableOption: {
          page: true,
          menuWidth: 220,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: true,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          keyId: "id",
          column: [
            {
              label: "名称",
              prop: "itemName",
              cell: true,
              formatter: function (row, value, label, column) {
                return '<a style="cursor:pointer;" onclick="watchDetail(\'' + row.id + '\')">' + row.itemName + '</a>';
              },
            },
            {
              label: "基数",
              prop: "base",
              cell: true,
            },
            {
              label: "总目标",
              cell: true,
              formatter: function (row, value, label, column) {
                return '<a>' + row.totalTarget + row.totalTargetUnit + '</a>';
              },
            },
            {
              label: "指标说明",
              prop: "description",
              cell: true,
              overHidden: true
            },
            {
              label: "起止日期",
              cell: true,
              formatter: function (row, value, label, column) {
                return '<a>' + row.startDate + '-' + row.endDate + '</a>';
              },
            },
            {
              label: "牵头部门",
              prop: "leadDeptName",
              cell: true
            },
            {
              label: "配合部门",
              prop: "cooDeptName",
              cell: true,
            },
          ]
        },
        normPage: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        normTableLoading: false,
        taskListData: [],
        taskTableOption: {
          page: true,
          menuWidth: 220,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: true,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          keyId: "id",
          column: [
            {
              label: "名称",
              prop: "itemName",
              cell: true,
              formatter: function (row, value, label, column) {
                return '<a style="cursor:pointer;" onclick="watchDetail(\'' + row.id + '\',\'' + true + '\')">' + row.itemName + '</a>';
              },
            },
            {
              label: "任务内容",
              prop: "description",
              cell: true,
              overHidden: true,
            },
            {
              label: "牵头部门",
              prop: "leadDeptName",
              cell: true
            },
            {
              label: "配合部门",
              prop: "cooDeptName",
              cell: true,
            }
          ]
        },
        taskPage: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        taskTableLoading: false,
        projectListData: [],
        projectTableOption: {
          page: true,
          menuWidth: 220,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: true,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          keyId: "id",
          column: [
            {
              label: "名称",
              prop: "itemName",
              cell: true,
              formatter: function (row, value, label, column) {
                return '<a style="cursor:pointer;" onclick="watchDetail(\'' + row.id + '\')">' + row.itemName + '</a>';
              },
            },
            {
              label: "总目标",
              prop: "totalTarget",
              cell: true,
              formatter: function (row, value, label, column) {
                return '<a>' + row.totalTarget + row.totalTargetUnit + '</a>';
              },
            },
            {
              label: "项目内容",
              prop: "description",
              cell: true,
              overHidden: true,
            },
            {
              label: "起止日期",
              cell: true,
              formatter: function (row, value, label, column) {
                return '<a>' + row.startDate + '-' + row.endDate + '</a>';
              },
            },
            {
              label: "牵头部门",
              prop: "leadDeptName",
              cell: true
            },
            {
              label: "配合部门",
              prop: "cooDeptName",
              cell: true,
            },
          ]
        },
        projectPage: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        projectTableLoading: false,

        normDialogVisible: false,
        addNormForm: {
          basePeriodYear: '',
          classify: '',
          itemName: '',
          mainDeptName: '',
          description: '',
          leadDeptId: '',
          assortDeptName: '',
          cooDeptId: '',
          startDate: '',
          endDate: '',
          totalTarget: '',
          totalTargetUnit: '',
          qualitativeTarget: '',
          lianghua: '',
          base: '',
          yearAverageRise: '',
          attribute: '',
          submitPeriod: '1'
        },
        serialNumber: 0,
        dutyType: '',//区分是添加指标，任务，还是项目
        modifyId: '',//修改项id
        addId: '',
        itemDetailData: [],
        task: true,//是否显示目标信息
        startDateTemp:'',
        endDateTemp:'',
      }
    },
    methods: {
      //修改目标参数赋值
      modifyTargetButton(row) {
        this.modifyTargetForm = {...row};
        this.modifyTargetVisible = true
      },
      //查看分解项详情
      watchDetail(id, task) {
        let that = this;
        if (task) {
          this.task = false
        }
        if (id != null && id != '') {
          decomposeItemDetail(id).then(response => {
            var records = response.data.data;
            switch (records.type) {
              case '1':
                that.itemDetailData = [
                  {label: '指标名称', value: getNotNull(records.itemName)},
                  {label: '指标说明', value: getNotNull(records.description)},
                  {label: '牵头部门', value: records.leadDeptName},
                  {label: '配合部门', value: records.cooDeptNameList ? records.cooDeptNameList.join('') : "无"},
                  {label: '起止日期', value: records.startDate + '-' + records.endDate},
                  {label: '总目标', value: getNotNull(records.totalTarget + records.totalTargetUnit)},
                  {label: '基期年', value: getNotNull(records.basePeriodYear)},
                  {label: '基数', value: getNotNull(records.base)},
                  {label: '年均增长', value: getNotNull(records.yearAverageRise)},
                  {label: '属性', value: this.attributeDic(records.attribute)},
                  {label: '是否可量化', value: this.quantifiableDic(records.quantifiable)},
                  {label: '指标类别', value: this.classifyDic(records.classify)},
                  {label: '时间类型', value: this.submitPeriodDic(records.submitPeriod)},
                ];
                break;
              case '2':
                that.itemDetailData = [
                  {label: '任务名称', value: getNotNull(records.itemName)},
                  {label: '任务内容', value: getNotNull(records.description)},
                  {label: '起止日期', value: records.startDate + '-' + records.endDate},
                  {label: '牵头部门', value: records.leadDeptName},
                  {label: '配合部门', value: records.cooDeptNameList ? records.cooDeptNameList.join('') : "无"},
                  {label: '时间类型', value: this.submitPeriodDic(records.submitPeriod)},
                ];
                break;
              case '3':
                that.itemDetailData = [
                  {label: '项目名称', value: getNotNull(records.itemName)},
                  {label: '项目内容', value: getNotNull(records.description)},
                  {label: '牵头部门', value: records.leadDeptName},
                  {label: '配合部门', value: records.cooDeptNameList ? records.cooDeptNameList.join('') : "无"},
                  {label: '起止日期', value: records.startDate + '-' + records.endDate},
                  {label: '定量目标', value: getNotNull(records.totalTarget + records.totalTargetUnit)},
                  {label: '定性目标', value: getNotNull(records.qualitativeTarget + records.totalTargetUnit)},
                  {label: '是否可量化', value: this.quantifiableDic(records.quantifiable)},
                  {label: '时间类型', value: this.submitPeriodDic(records.submitPeriod)},
                ];
                break;
            }
          })
        }
        if (!task) {
          workingItemTargetPage({ditemId: id}).then(response => {
            if (response.data.code == 0) {
              for (let i of response.data.data.records) {
                i.year = i.year.toString()
              }
              this.tableData = response.data.data.records
            }
          })
        }
        this.detail = true
      },
      quantifiableDic(val) {
        switch (val) {
          case true:
            return '是';
            break;
          case false:
            return '否';
            break;
          default:
            return '无';
            break;
        }
      },
      submitPeriodDic(val) {
        switch (val) {
          case '1':
            return '年报';
            break;
          case '2':
            return '季报';
            break;
          case '3':
            return '月报';
            break;
          default:
            return '无';
            break;
        }
      },
      classifyDic(val) {
        switch (val) {
          case '1':
            return '经济发展';
            break;
          case '2':
            return '创新驱动';
            break;
          case '3':
            return '民生福祉';
            break;
          case '4':
            return '资源环境';
            break;
          default:
            return '无';
            break;
        }
      },
      attributeDic(val){
        switch (val) {
          case '0':
            return '预期性';
            break;
          case '1':
            return '约束性';
            break;
          default:
            return '无';
            break;
        }
      },
      getProjectList() {

      },
      getTaskList() {

      },
      // 附件下载
      downloadFile(fileId, fileName) {
        filedownload(fileId).then(response => {
          if (response.status == 200) {
            this.download(response.data, fileName)
          }
        }).catch((error) => {
          this.$notify({
            title: "失败",
            message: "上传失败[" + error + "]",
            type: "error",
            duration: 2000
          });
        })
      },
      modifyWorkingItemTarget() {
        let n = this.modifyTargetForm;
        let data = {
          year: n.year,
          targetContent: n.targetContent,
          targetValue: n.targetValue,
          targetValueUnit: n.targetValueUnit,
          ditemId: this.addId,
        };
        this.$refs.modifyTargetForm.validate(valid => {
          if (valid) {
            this.$confirm(this.addId ? "确定新增目标吗?" : "确定修改目标吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              if (this.addId) {
                addWorkingItemTarget(data).then(response => {
                  if (response.data.code == 0) {
                    this.$notify({
                      title: "成功",
                      message: "新增成功",
                      type: "success",
                      duration: 2000
                    });
                    this.modifyTargetVisible = false;
                    this.searchTargetList(this.ditemId)
                  }
                })
              } else {
                modifyWorkingItemTarget(n.id, data).then(response => {
                  if (response.data.code == 0) {
                    this.$notify({
                      title: "成功",
                      message: "修改成功",
                      type: "success",
                      duration: 2000
                    });
                    this.modifyTargetVisible = false;
                    this.searchTargetList(this.ditemId)
                  }
                })
              }

            })
          }
        })
      },
      //删除目标
      delTarget(row) {
        this.$confirm("是否删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          deleteWorkingItemTarget(row.id).then(response => {
            if (response.data.code == 0) {
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
                duration: 2000
              });
              this.searchTargetList(this.ditemId)
            }
          })
        })
      },
      //查询目标列表
      searchTargetList(row, add) {
        if (add) {
          this.addId = row.id;
          this.modifyTargetForm = {}
        }
        if (typeof (row) == 'object') {
          this.ditemId = row.id
        } else {
          this.ditemId = row
        }
        workingItemTargetPage({ditemId: this.ditemId}).then(response => {
          if (response.data.code == 0) {
            for (let i of response.data.data.records) {
              i.year = i.year.toString()
            }
            console.warn(response.data)
            this.tableData = response.data.data.records
          }
        })
      },
      //弹框关闭回调
      closed() {
        this.modifyTargetForm = {};
        this.addId = '';
        let add = this.addNormFormFormRules;
        add.description[0].required = true;
        // this.tableData=''
        this.task = true
      },
      //关闭弹框回调
      close() {
        this.addNormForm = {
          basePeriodYear: '',
          itemName: '',
          mainDeptName: '',
          description: '',
          leadDeptId: '',
          assortDeptName: '',
          cooDeptId: '',
          startDate: '',
          endDate: '',
          totalTarget: '',
          totalTargetUnit: '',
          qualitativeTarget: '',
          lianghua: '',
          base: '',
          yearAverageRise: '',
          attribute: '',
          classify: '',
          submitPeriod: '1'
        },
          this.modifyId = '';
        // this.$refs.addNormForm.resetFields();
        this.dutyType = ''
      },
      //修改目标赋值
      modify(row, dutyType) {
        this.addId = row.id;
        this.modifyTargetForm = {};
        this.searchTargetList(row);
        if (dutyType == 1) {
          this.task = false
        }
        this.dutyType = dutyType;
        this.modifyId = row.id;
        this.addNormForm = {
          itemName: row.itemName,
          mainDeptName: row.leadDeptName,
          description: row.description,
          leadDeptId: row.leadDeptId,
          assortDeptName: row.cooDeptName,
          cooDeptId: row.cooDeptId,
          startDate: row.startDate,
          endDate: row.endDate,
          totalTarget: row.totalTarget,
          totalTargetUnit: row.totalTargetUnit,
          qualitativeTarget: row.qualitativeTarget,
          lianghua: row.lianghua,
          base: row.base,
          yearAverageRise: row.yearAverageRise,
          attribute: row.attribute,
          classify: row.classify,
          basePeriodYear: row.basePeriodYear,
          submitPeriod: row.submitPeriod,
        };
        this.normDialogVisible = true;
        let add = this.addNormFormFormRules;
        switch (dutyType) {
          case '0':
            this.addNormForm.lianghua = '1';
            add.description[0].required = false;
            return;
          case '2':
            this.addNormForm.lianghua = '0';
            add.description[0].required = false;
            return;
        }
      },
      normDelete(row) {
        this.$confirm("是否删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          delDecomposition(row.id).then(response => {
            if (response.data.code == 0) {
              this.loadData('1', this.normPage.currentPage, this.normPage.pageSize);
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
                duration: 2000
              });
            }
          })
        })
      },
      taskDelete(row) {
        this.$confirm("是否删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          delDecomposition(row.id).then(response => {
            if (response.data.code == 0) {
              this.loadData('2', this.taskPage.currentPage, this.taskPage.pageSize);
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
                duration: 2000
              });
            }
          })
        })
      },
      projectDelete(row) {
        this.$confirm("是否删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          delDecomposition(row.id).then(response => {
            if (response.data.code == 0) {
              this.loadData('3', this.projectPage.currentPage, this.projectPage.pageSize);
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
                duration: 2000
              });
            }
          })
        })
      },
      currentChange1(current) {
        this.normPage.currentPage = current;
        this.loadData('1', current, this.normPage.pageSize)
      },
      currentChange2(current) {
        this.taskPage.currentPage = current;
        this.loadData('2', current, this.taskPage.pageSize)
      },
      currentChange3(current) {
        this.projectPage.currentPage = current;
        this.loadData('3', current, this.projectPage.pageSize)
      },
      sizeChange1(size) {
        this.normPage.pageSize = size;
        this.loadData('1', this.normPage.currentPage, size)
      },
      sizeChange2(size) {
        this.taskPage.pageSize = size;
        this.loadData('2', this.taskPage.currentPage, size)
      },
      sizeChange3(size) {
        this.projectPage.pageSize = size;
        this.loadData('3', this.projectPage.currentPage, size)
      },
      //获取分解项列表
      loadData(type, current, size) {
        let that = this;
        decomposeDraftDetailList(Object.assign({
          current: current || 1,
          size: size || 10,
          draftId: JSON.parse(sessionStorage.getItem('modifyProgram')),
          itemType: type,
        })).then(response => {
          switch (type) {
            case '1':
              this.normListData = response.data.data.records;
              this.normPage.total = response.data.data.total;
              break;
            case '2':
              this.taskListData = response.data.data.records;
              this.taskPage.total = response.data.data.total;
              break;
            case '3':
              this.projectListData = response.data.data.records;
              this.projectPage.total = response.data.data.total
          }
        })
      },
      // 弹出选择牵头部门弹框
      clickMainDept() {
        this.deptVisible = true
      },
      cancelDept(deptIds, deptNames) {
        this.deptVisible = false;
      },
      getSelectInfo(deptId, deptName) {
        this.addNormForm.mainDeptName = deptName;
        this.addNormForm.leadDeptId = deptId;
        this.deptVisible = false;
      },
      //弹出选择配合部门弹框
      clickAssortDept() {
        this.supportDeptVisible = true;
      },
      cancelSupportDept() {
        this.supportDeptVisible = false;
      },
      getSupportDeptCheckInfo(deptIds, deptNames) {
        this.addNormForm.assortDeptName = deptNames;
        this.addNormForm.cooDeptId = deptIds;
        this.supportDeptVisible = false;
      },

      goBack() {
        this.$router.go(-1);
      },
      commitList() {
        if (this.projectForm.description == '') {
          this.$notify({
            title: "提醒",
            type: "warning",
            message: "请填写方案描述",
            duration: 2000
          });
          return;
        }
        if (this.projectListData.length == 0 && this.taskListData.length == 0 && this.normListData.length == 0) {
          this.$notify({
            title: "提醒",
            type: "warning",
            message: "请至少分配一项指标，任务或项目",
            duration: 2000
          });
          return;
        }

        this.$refs.projectForm.validate(valid => {
          if (valid) {
            this.$confirm("确定修改方案吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              var arr = [];
              arr.push(...this.fileIds);
              for (var item in this.fileListMixin) {
                arr.push(this.fileListMixin[item].url);
              }
              this.projectForm.fileIds = arr;
              this.projectForm.pmuc = this.dataList.pmuc;
              this.projectForm.itemTargetList = this.normListData;
              this.projectForm.itemTaskList = this.taskListData;
              this.projectForm.itemProjectList = this.projectListData;
              this.isDisabled = true;
              modifyProgramDetail(JSON.parse(sessionStorage.getItem('modifyProgram')), this.projectForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: "成功",
                    message: "修改成功",
                    type: "success",
                    duration: 2000
                  });
                  this.$router.go(-1);
                }
              })
            });
            this.isDisabled = false;
          } else {
            this.isDisabled = false;
          }
        })
      },
      getNormList() {
        this.normListData = []
      },
      addNorm(type) {
        this.dutyType = type;
        this.normDialogVisible = true;
        let add = this.addNormFormFormRules;
        this.addNormForm.startDate = this.startDateTemp.toString();
        this.addNormForm.endDate = this.endDateTemp.toString();
        switch (type) {
          case '0':
            this.addNormForm.lianghua = '1';
            add.description[0].required = false;
            this.addNormForm.basePeriodYear = (this.startDateTemp-1).toString();
            return;
          case '1':
            return;
          case '2':
            this.addNormForm.lianghua = '0';
            add.description[0].required = false;
            return;
        }
      },
      confirmNormForm() {
        let obj = this.dataList;
        let add = this.addNormForm;
        let data = {
          cooDeptId: add.cooDeptId,
          decomposeDraftId: obj.id,
          leadDeptId: add.leadDeptId,
          planningTitle: obj.planningTitle,
          pmuc: obj.pmuc,
          itemName: add.itemName,
          description: add.description,
          submitPeriod: add.submitPeriod,
          startDate: add.startDate,
          endDate: add.endDate,
        };
        if (add.leadDeptId == '') {
          this.$notify({
            title: '提示',
            message: '请选择牵头部门',
            type: 'warning',
            duration: 2000
          });
          return;
        }
        this.$refs.addNormForm.validate(valid => {
          if (valid) {
            if (this.dutyType == '0') {
              data.attribute = add.attribute;
              data.totalTarget = add.totalTarget,
                data.totalTargetUnit = add.totalTargetUnit,
                data.lianghua = add.lianghua,
                data.base = add.base,
                data.yearAverageRise = add.yearAverageRise,
                data.type = "1";
              data.classify = add.classify;
              data.basePeriodYear = add.basePeriodYear;
              if (!this.modifyId) {
                addDecomposition(data).then(response => {
                  if (response.data.code == 0) {
                    this.loadData('1');
                    this.$notify({
                      title: "成功",
                      message: "新增成功",
                      type: "success",
                      duration: 2000
                    });
                  }
                })
              } else {
                modifyDecomposition(this.modifyId, data).then(response => {
                  if (response.data.code == 0) {
                    this.loadData('1');
                    this.$notify({
                      title: "成功",
                      message: "修改成功",
                      type: "success",
                      duration: 2000
                    });
                  }
                })
              }
            } else if (this.dutyType == '1') {
              data.type = "2";
              if (!this.modifyId) {
                addDecomposition(data).then(response => {
                  if (response.data.code == 0) {
                    this.loadData('2');
                    this.$notify({
                      title: "成功",
                      message: "新增成功",
                      type: "success",
                      duration: 2000
                    });
                  }
                })
              } else {
                modifyDecomposition(this.modifyId, data).then(response => {
                  if (response.data.code == 0) {
                    this.loadData('2');
                    this.$notify({
                      title: "成功",
                      message: "修改成功",
                      type: "success",
                      duration: 2000
                    });
                  }
                })
              }
            } else if (this.dutyType == '2') {
              data.totalTarget = add.totalTarget,
                data.totalTargetUnit = add.totalTargetUnit,
                data.qualitativeTarget = add.qualitativeTarget,
                data.lianghua = add.lianghua,
                data.type = "3";
              if (!this.modifyId) {
                addDecomposition(data).then(response => {
                  if (response.data.code == 0) {
                    this.loadData('3');
                    this.$notify({
                      title: "成功",
                      message: "新增成功",
                      type: "success",
                      duration: 2000
                    });
                  }
                })
              } else {
                modifyDecomposition(this.modifyId, data).then(response => {
                  if (response.data.code == 0) {
                    this.loadData('3');
                    this.$notify({
                      title: "成功",
                      message: "修改成功",
                      type: "success",
                      duration: 2000
                    });
                  }
                })
              }
            }

            this.normDialogVisible = false;
          }
        })
      },
      exportDraftFile() {
        this.$confirm("确定要导出方案吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          exportDraftFile(this.$route.query.draftId).then(response => {
            var exportFileName = "责任分解方案.docx";
            this.download(response.data, exportFileName)
          });
        })
      },
      // 下载文件
      download(data, filename) {
        if (data == null) {

        } else {
          let url = window.URL.createObjectURL(new Blob([data]));
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', filename);
          document.body.appendChild(link);
          link.click()
        }
      },

    },
  }
</script>

<style lang="scss">
  /*.el-col.el-col-24 {*/
  /*  width: 100%;*/
  /*  float: right;*/
  /*  padding: 1px;*/
  /*}*/
</style>

<style lang="scss" scoped>
  .relateddiv {
    margin-left: 54px
  }

  .card-border {
    border: 1px solid #d2d2d2;
    padding: 12px;
  }

  .form-submit {
    text-align: center;
    margin-top: 15px;
  }

  .card-body {
    padding: 10px;
  }

  .head-button .el-button {
    padding: 8px 15px;
  }

  .form-item {
    font-weight: 600;
  }

  .form-group {
    margin-top: 1rem;
    margin-left: 26px;
  }
</style>



